<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="refresh" content="60"><!--每10秒刷新页面-->
        <title>标签</title>
        <meta name="description" content="描述测试">
        <meta name="keywords" content="关键词,测试">
        <link rel="stylesheet" type="text/css" href="../../css/test_tag.css">
        <link rel="shortcut icon" type="image/x-icon"
            href="../../images/Unity.png"><!--标签图标-->
        <!-- <style>
            h1{
                font-size: 54px;
                color: red;
            }
            a {
                color:deeppink;
            }
        </style> -->
    </head>
    <body>
        <header></header>
        <nav>
            <a href="aa">首页</a>
            <a href="a">总览</a>
            <a href="q">概况</a>
            <a href="a">实况</a>
            <a href="b">面板</a>
        </nav>
        <h1>h1</h1>
        <hr>
        <a id="tips">有用的部分</a>
        <abbr title="这是第二段abbr标签"><h2>第二段</h2></abbr>
        <p>一个段落</p>
        <p>这个<br>段落<br>演示了分行的效果</p>
        <img decoding="async" src="../../images/001.webp" width="512" />
        <br>
        <a href="https://www.baidu.com/" target="_blank"
            rel="noopener noreferrer">在新窗口打开百度</a>
        <br>
        <a href="#tips">转跳到有用的部分</a>
        <br>
        <a href="https://www.runoob.com/html/html-links.html#comments">访问有用的提示部分</a>
        <div id="loadimg" class="img"></div>
        <div>
            <fieldset>
                <legend>插入日志到数据库</legend>
                输入日志:<input id="inputlog" type="text">
                <input type="button" value="插入" onclick="savelog()">
                <hr>
                <label id="num"></label>
                <div id="logs"></div>
            </fieldset>
        </div>

        <script>
            var img = document.getElementById("loadimg");
            var num = document.getElementById("num");
            var logs = document.getElementById("logs");
            
            // if (typeof(Storage) !== "undefined")
            // {
            //     alert("支持Storage")
            // }
            // else
            // {
            //     alert("不支持Storage")
            // }
                    
            var idx = 0;
            var db = openDatabase('mydb', '1.0', 'Test DB', 1 * 1024 * 1024)
            db.transaction(function (tx) {
                tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "我的博客")');
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
            });
            idx = 3;
            function savelog()
            {
                var inputlog = document.getElementById("inputlog")
                var msg = inputlog.value;
                db.transaction(function (tx) {
                    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (?, ?)', [idx++, msg]);
                });
                        
                readlog();
                inputlog.value = ""
            }

            function readlog()
            {
                db.transaction(function (tx) {
                    tx.executeSql('SELECT * FROM LOGS', [], function(tx, results){
                        var len = results.rows.length, i;
                        num.innerHTML = "<p>查询结果条数:" + len + "</p>";

                        var msg = "<ol>"
                        for (i = 0; i < len; i++)
                        {
                            msg += "<li>" + results.rows.item(i).log + "</li>";
                        }
                        msg += "</ol>";
                        logs.innerHTML = msg;
                    });
                });
            }

            readlog();
        </script>
    </body>
</html>
